<template>
  <div class="depositTerm">
    <x-header class="header" :left-options="{showBack: showHeaderBack}" ref="header">预订协议</x-header>
    <div class="topHolder"></div>
    <iframe width="100%" height="100%" style="border:none;" ref="iframe" :src="contextPath + pdfjsPath + '/web/viewer.html?file='+ contextPath + DepositTermPath"></iframe>
  </div>
</template>

<script>
  import {contextPath,getDepositTerm} from "../../api";

  export default {
    name:'depositTerm',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        contextPath:contextPath,
        pdfjsPath:'',
        DepositTermPath:''
      }
    },
    components:{
    },
    computed:{
    },
    methods:{
      setSize(){
        let contentHeight = window.screen.height - this.$refs.header.$el.offsetHeight - 120
        this.$refs.iframe.style.height = contentHeight + 'px'
      }
    },
    mounted(){
      getDepositTerm().then((res)=>{
        if(res.status == 'success'){
          this.pdfjsPath = res.data.pdfjsPath
          this.DepositTermPath = res.data.DepositTermPath
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getDepositTerm error info:', res.msg)
        }
        this.setSize()
        window.onresize = ()=>{
          this.setSize()
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getDepositTerm catch info:',err)})
    },
    beforeDestroy(){
      window.onresize = ()=>{}
    }
  }
</script>

<style lang="scss" scoped>
  .depositTerm{
    height:100%;
  }
</style>
